<template>
  <div>
    <div ref="table" class="table">
      <div v-if="Object.keys(playerInfoData).length!=0">
        <h2>运动员信息</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <tr>
            <td>姓名</td>
            <td name="name">{{playerInfoData.name||'-'}}</td>
            <td>运动项目</td>
            <td name="sportItem">{{playerInfoData.sportInfo||'-'}}</td>
            <td rowspan="4" name="photo" width="150px">
              <img :src="playerInfoData.photo" style="width: 100px;"></image>
            </td>
          </tr>
          <tr>
            <td>身份证</td>
            <td name="IDNum">{{playerInfoData.IDNum||'-'}}</td>
            <td>性别</td>
            <td name="gender">{{playerInfoData.gender||'-'}}</td>
          </tr>
          <tr>
            <td>出生日期</td>
            <td name="birthday">{{playerInfoData.birthday||'-'}}</td>
            <td>重点运动员</td>
            <td name="empType">{{playerInfoData.isImport||'-'}}</td>
          </tr>
          <tr>
            <td>教练员</td>
            <td name="coach">{{playerInfoData.coachName||'-'}}</td>
            <td>联系电话</td>
            <td name="sport">{{playerInfoData.phone||'-'}}</td>
          </tr>
        </table>
      </div>
      <div v-if="Object.keys(playerDetailData).length!=0">
        <h2>详细信息</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <tr>
            <td>现在住址</td>
            <td name="name">{{playerDetailData.address||'-'}}</td>
            <td>邮箱</td>
            <td name="birthday">{{playerDetailData.email||'-'}}</td>
          </tr>
          <tr>
            <td>政治面貌</td>
            <td name="empType">{{playerDetailData.political||'-'}}</td>
            <td>受教育程度</td>
            <td name="sport">{{playerDetailData.eduction||'-'}}</td>
          </tr>
          <tr>
            <td>注册号</td>
            <td name="sportItem">{{playerDetailData.enrollId||'-'}}</td>
            <!-- <td>国家</td>
            <td name="sport">{{playerDetailData.culture||'-'}}</td> -->
            <td>注册地</td>
            <td name="sportItem">{{playerDetailData.enroll||'-'}}</td>
          </tr>
          <tr>
            <td>籍贯</td>
            <td name="sport">{{playerDetailData.nativePlace||'-'}}</td>
            <td>入校时间</td>
            <td name="sport">{{playerDetailData.joinDate||'-'}}</td>
          </tr>
          <tr>
            <!-- <td>属性</td>
            <td name="sportItem">{{playerDetailData.wageLevel||'-'}}</td> -->
          </tr>
          <tr>
            <td>离校时间</td>
            <td name="sportItem">{{playerDetailData.leftDate||'-'}}</td>
            <td>运动员状态</td>
            <td name="sport">{{playerDetailData.playerStatus||'-'}}</td>
          </tr>
          <tr>
            <td>集中类型</td>
            <td name="sportItem">{{playerDetailData.focusType||'-'}}</td>
            <td>入学时年级</td>
            <td name="sport">{{playerDetailData.grade||'-'}}</td>
          </tr>
          <tr>
            <td>推荐学校</td>
            <td name="sportItem">{{playerDetailData.recommendationSchool||'-'}}</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <div v-if="playerFamilyData.length != 0">
        <h2>家庭成员</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <td>姓名</td>
              <td>称谓</td>
              <!-- <td>出生日期</td>
              <td>政治面貌</td> -->
              <td>工作单位</td>
              <!-- <td>工作岗位</td> -->
              <td>联系电话</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in playerFamilyData" :key="index">
              <td>{{item.name||'-'}}</td>
              <td>{{item.appellation||'-'}}</td>
          <!--    <td>{{item.birthday||'-'}}</td>
              <td>{{item.political||'-'}}</td> -->
              <td>{{item.Work||'-'}}</td>
              <!-- <td>{{item.post||'-'}}</td> -->
              <td>{{item.phone||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="playerSportResumeData.length != 0">
        <h2>运动简历</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <td>开始日期</td>
              <td>结束日期</td>
              <td>训练单位</td>
              <td>运动项目</td>
              <td>教练员</td>
              <td>最好成绩</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in playerSportResumeData" :key="index">
              <td>{{item.openDate||'-'}}</td>
              <td>{{item.closeDate||'-'}}</td>
              <td>{{item.orgName||'-'}}</td>
              <td>{{item.sport||'-'}}</td>
              <td>{{item.coachName||'-'}}</td>
              <td>{{item.result||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="playerTrainingData.length != 0">
        <h2>集训情况</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <td>开始日期</td>
              <td>结束日期</td>
              <td>训练单位</td>
              <td>运动项目</td>
              <td>教练员</td>
              <td>集训地址</td>
              <td>成绩</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in playerTrainingData" :key="index">
              <td>{{item.openDate||'-'}}</td>
              <td>{{item.closeDate||'-'}}</td>
              <td>{{item.orgName||'-'}}</td>
              <td>{{item.sport||'-'}}</td>
              <td>{{item.coachName||'-'}}</td>
              <td>{{item.address||'-'}}</td>
              <td>{{item.result||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="playerEducationData.length != 0">
        <h2>教育经历</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <td>开始日期</td>
              <td>结束日期</td>
              <td>学校名称</td>
              <td>受教育程度</td>
              <td>专业</td>
              <td>学位</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in playerEducationData" :key="index">
              <td>{{item.openDate||'-'}}</td>
              <td>{{item.closeDate||'-'}}</td>
              <td>{{item.schoolName||'-'}}</td>
              <td>{{item.educationType||'-'}}</td>
              <td>{{item.major||'-'}}</td>
              <td>{{item.eductionLevel||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="matchResultData.length != 0">
        <h2>比赛情况</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <td>比赛时间</td>
              <td>赛事级别</td>
              <td>赛事类别</td>
              <td>参赛项目</td>
              <td>参赛小项</td>
              <td>组别</td>
              <td>名次</td>
              <td>个人/团体</td>
              <td>比赛地点</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in matchResultData" :key="index">
              <td>{{item.matchDate||'-'}}</td>
              <td>{{item.matchLevelName||'-'}}</td>
              <td>{{item.matchKindName||'-'}}</td>
              <td>{{item.matchEventName||'-'}}</td>
              <td>{{item.matchEventItemName||'-'}}</td>
              <td>{{item.delegation||'-'}}</td>
              <td>{{item.matchRank||'-'}}</td>
              <td>{{item.multiPlayer||'-'}}</td>
              <td>{{item.matchAddressName||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="playerTransportData.length != 0">
        <h2>输送情况</h2>
        <!-- <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000"> -->
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;">
          <thead>
            <tr>
              <td>输出单位</td>
              <td>走向</td>
              <td>入队时间</td>
              <td>输送时间</td>
              <td>接受单位</td>
              <td>运动大项</td>
              <td>吸收项目</td>
              <td>教练员</td>
              <td>备注</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in playerTransportData" :key="index">
              <td>{{item.outOrg||'-'}}</td>
              <td>{{item.toward||'-'}}</td>
              <td>{{item.sportDate||'-'}}</td>
              <td>{{item.transportDate||'-'}}</td>
              <td>{{item.inOrg||'-'}}</td>
              <td>{{item.sport||'-'}}</td>
              <td>{{item.allSportId||'-'}}</td>
              <td>{{item.coachName||'-'}}</td>
              <td>{{item.memo||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="playerSchoolRollData.length != 0">
        <h2>学籍情况</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <td>年度</td>
              <td>学期</td>
              <td>电子学籍</td>
              <td>学籍所在学校</td>
              <td>学籍类型</td>
              <td>班主任</td>
              <td>班主任电话</td>
              <td>备注</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in playerSchoolRollData" :key="index">
              <td>{{item.schoolYear||'-'}}</td>
              <td>{{item.schoolTerm||'-'}}</td>
              <td>{{item.schoolRollId||'-'}}</td>
              <td>{{item.orgName||'-'}}</td>
              <td>{{item.rollType||'-'}}</td>
              <td>{{item.headName||'-'}}</td>
              <td>{{item.headPhone||'-'}}</td>
              <td>{{item.memo||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="playerProfessionLevelData.length != 0">
        <h2>运动等级</h2>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <td>开始时间</td>
              <td>结束时间</td>
              <td>运动项目</td>
              <td>运动小项</td>
              <td>训练单位</td>
              <td>最好成绩</td>
              <td>等级类型</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in playerProfessionLevelData" :key="index">
              <td>{{item.openDate||'-'}}</td>
              <td>{{item.closeDate||'-'}}</td>
              <td>{{item.sportId||'-'}}</td>
              <td>{{item.sportItemId||'-'}}</td>
              <td>{{item.orgName||'-'}}</td>
              <td>{{item.bestResult||'-'}}</td>
              <td>{{item.skillType||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="cultureResult">
        <h2>文化成绩</h2>
        <div v-html="cultureResultStr"></div>
      </div>
      <div v-if="precis">
        <h2>大纲考核</h2>
        <div v-html="precisStr"></div>
      </div>
      <div v-if="monitor">
        <h2>机能监控</h2>
        <div v-html="monitorStr"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    edu_subject
  } from '@/api/person.js'
  import {
    selectByPackageId
  } from '@/api/meta.js'
  export default {
    props: ['detailData'],
    data() {
      return {
        playerInfoData: {},
        playerDetailData: {},
        playerFamilyData: [],
        playerEducationData: [],
        playerSportResumeData: [],
        playerTrainingData: [],
        playerTransportData: [],
        playerSchoolRollData: [],
        playerProfessionLevelData: [],
        matchResultData: [],
        precis: null,
        cultureResult: null,
        monitor: null,
        dict_schoolTerm: this.$store.state.user.dict_school_term,
        dict_subject: {},
        cultureResultStr: '',
        precisStr: '',
        monitorStr: '',
        timmer: null,
      }
    },
    watch: {
      'detailData.player_basic':{ //监听的对象
        deep:true, //深度监听设置为 true
        handler:function(newV,oldV){
          this.$nextTick(()=>{
            this.init_precisMap()
            this.init_cultureResultMap()
            this.init_monitorMap()
            this.initDetailData()
            if (this.cultureResult) {
              if (this.cultureResultStr != '') {
                this.$emit('cultureResultReturned', this.playerInfoData.name)
              } else {
                this.$emit('cultureResultReturned', this.playerInfoData.name)
              }
            } else {
              this.$emit('cultureResultReturned', this.playerInfoData.name)
            }
          })
        }
      },
    },
    methods: {
      initDetailData() {
        this.playerInfoData = this.detailData.player_basic || {}
        this.playerDetailData = this.detailData.player_detail || {}
        this.playerFamilyData = this.detailData.family || []
        this.playerSportResumeData = this.detailData.player_sportResume || []
        this.playerTrainingData = this.detailData.player_training || []
        this.playerEducationData = this.detailData.education || []
        this.playerTransportData = this.detailData.player_transport || []
        this.playerSchoolRollData = this.detailData.player_schoolRoll || []
        this.playerProfessionLevelData = this.detailData.professionLevel || []
        this.matchResultData = this.detailData.player_takePartInMatch || []
        this.precis = this.detailData.precisMap || null
        this.cultureResult = this.detailData.cultureResultMap || null
        this.monitor = this.detailData.monitorMap || null
      },
      tablePrint() {
        this.$nextTick(()=>{
          const printStyle = `
            table
            {
                width: 100%;
                border-collapse: collapse;
            }
            table td, table th
            {
                height: 40px;
                padding: 10px;
            }
          `
          // setTimeout(() => {
            let content = this.$refs.table
            document.title = this.playerInfoData.name+'个人档案'
            this.$XPrint({
              sheetName: '档案打印',
              style: printStyle,
              content: content.innerHTML
            })
          // }, 3000);
        })
      },
      init_cultureResultMap() {
        // 文化成绩
        if(!this.detailData.cultureResultMap || Object.keys(this.detailData.cultureResultMap).length==0){
          this.cultureResultStr = '<table style="border-collapse: collapse;width: 100%;color: #000000;" bordercolor="#000" border="2"><thead></thead><tbody><tr><td style="height: 40px;padding: 10px;font-size: 21px;">考试类型</td><td style="height: 40px;padding: 10px;font-size: 21px;">语文</td><td style="height: 40px;padding: 10px;font-size: 21px;">数学</td><td style="height: 40px;padding: 10px;font-size: 21px;">英语</td><tr><td style="height: 40px;padding: 10px;font-size: 21px;">期末</td><td style="height: 40px;padding: 10px;font-size: 21px;">-</td><td style="height: 40px;padding: 10px;font-size: 21px;">-</td><td style="height: 40px;padding: 10px;font-size: 21px;">-</td></tr></tbody></table>'
          return
        }

        edu_subject().then(result => {
          for (let i = 0; i < result.data.length; i++) {
            this.dict_subject[result.data[i].subjectId] = result.data[i].name;
          }
          this.cultureResultStr = ''
          let dict_cultureResultType = {
            // 1	:'平时',
            // 2	:'期中',
            3: '期末',
          }
          let step4cultureResult = 9; // 语数外，史地政，物化生  经典九门，再有什么体育美术音乐。。但未必都录
          // 每一个学期生成一个表
          for (let schoolTerm in this.detailData.cultureResultMap) {

            // 得到该学期下所有记录了成绩的科目
            let dict_currentSchoolTermSubject = {};
            for (let cultureResultType in this.detailData.cultureResultMap[schoolTerm]) {
              for (let subject in this.detailData.cultureResultMap[schoolTerm][cultureResultType]) {
                dict_currentSchoolTermSubject[subject] = "-"
              }

            }
            let currentSubjectArr = [];
            for (let subject in dict_currentSchoolTermSubject) {
                currentSubjectArr.push(subject)
            }
            let currentSubjectArrLength = currentSubjectArr.length;

            if (currentSubjectArrLength % step4cultureResult !== 0) {
                for (let i = 0; i < step4cultureResult - currentSubjectArrLength % step4cultureResult; i++) {
                    currentSubjectArr.push({})
                }
            }
            let currentLoopCount = Math.ceil(currentSubjectArr.length / step4cultureResult);
            let eachTable =
              "<table style='border-collapse: collapse;width: 100%;color: #000000;' bordercolor='#000' border='2' ><thead><h3 style='color: #000;background-color: #ffffff'>" + this.dict_schoolTerm[schoolTerm] + "</h3></thead>";
            for (let loop = 0; loop < currentLoopCount; loop++) {
              let thead = "<tbody><tr><td style='height: 40px;padding: 10px;font-size: 21px;'>考试类型</td>";
              for (let i = loop * step4cultureResult; i < (loop + 1) * step4cultureResult; i++) {
                if (this.dict_subject[currentSubjectArr[i]]) {
                  thead += "<td style='height: 40px;padding: 10px;font-size: 21px;'>" + this.dict_subject[
                    currentSubjectArr[i]] + "</td>"
                } else {
                  thead += "<td style='height: 40px;padding: 10px;font-size: 21px;'>-</td>"
                }

              }
              eachTable += thead + "</tr>";
              // 每一个考试类型占有一行，现阶段只有三种考试类型：平时，期中，期末
              let tr = ""
              for (let cultureResultType in dict_cultureResultType) {
                tr += "<tr><td style='height: 40px;padding: 10px;font-size: 21px;'>" + dict_cultureResultType[
                  cultureResultType] + "</td>"
                for (let i = loop * step4cultureResult; i < (loop + 1) * step4cultureResult; i++) {

                  let score = "";
                  if (this.detailData.cultureResultMap[schoolTerm][cultureResultType] && this.detailData
                    .cultureResultMap[schoolTerm][cultureResultType][currentSubjectArr[i]] && this.detailData
                    .cultureResultMap[schoolTerm][cultureResultType][currentSubjectArr[i]].length > 0) {
                    score = this.detailData.cultureResultMap[schoolTerm][cultureResultType][currentSubjectArr[i]][0]
                      .score
                  }
                  if (score) {
                    tr += "<td style='height: 40px;padding: 10px;font-size: 21px;'>" + score + "</td>"
                  } else {
                    tr += "<td style='height: 40px;padding: 10px;font-size: 21px;'>-</td>"
                  }
                }
                tr += "</tr></tbody>"
              }
              eachTable += tr
            }
            this.cultureResultStr += eachTable
          }
        })
      },
      sortNumber(a, b) {
        return a - b
      },
      dateStr(eachDate) {
        return eachDate.substring(0,eachDate.lastIndexOf("."));
      },
      init_precisMap() {
        //大纲考核
        this.precisStr = ''
        var packageIdArray = [];
        if (!this.detailData.precisMap || Object.keys(this.detailData.precisMap).length === 0) {
          // 空结果集 不处理，直接返回
          return;
        }
        //将所有的packageId用的编号拿出来
        for (var eachDate in this.detailData.precisMap) {
          var thisData1 = this.detailData.precisMap[eachDate].data;
          if (!thisData1) continue
          for (var g = 0; g < thisData1.length; g++) {
            var thisId = thisData1[g].packageId;
            if (packageIdArray.indexOf(thisId) == -1)
              packageIdArray.push(thisId);
          }
        }

        packageIdArray.sort(this.sortNumber);
        var packageName = {};
        if (packageIdArray.length > 0) {
          selectByPackageId({
            packageIds: packageIdArray.toString()
          }).then(result => {
            for (var i = 0; i < result.data.length; i++) {
              packageName[result.data[i].packageId] = result.data[i].shortName;
            }
          }).then(() => {
            // 照包名来分解数据
            var packageData = {};
            for (var pNum = 0; pNum < packageIdArray.length; pNum++) {
              var eachdd = {};
              for (var eachDate in this.detailData.precisMap) {
                var eachDateData = this.detailData.precisMap[eachDate];
                var eachData = eachDateData.data;

                var thisDate = this.dateStr(eachDate);
                var dataArray = eachdd[thisDate];
                if (dataArray == undefined) {
                  dataArray = [];
                }

                eachdd[thisDate] = dataArray;
                for (var p in eachData) {
                  var thisPackageId = eachData[p]["packageId"];
                  if (packageIdArray[pNum] == thisPackageId) {
                    dataArray.push(eachData[p]);
                  }
                }

              }
              packageData[packageIdArray[pNum]] = eachdd;

            }

            // 每一行最大列数定义为9，该数字是查阅了所有包里最大指标数 24，定义了9 减去首列时间信息列，就是8个指标数据列
            let maxColCount = 5;
            let step = maxColCount - 1;
            let resultObj = {};
            for (var packageId in packageData) {
              // 当前包循环次数
              let currentLoop = 1;
              let maxColDate = ""
              for (let date in packageData[packageId]) {
                if (packageData[packageId][date].length == 0) {
                  if (maxColDate == "") {
                    maxColDate = date;
                  }
                  continue;
                }
                let maxLoop = Math.ceil(packageData[packageId][date].length / step);
                if (maxLoop >= currentLoop) {
                  currentLoop = maxLoop;
                  maxColDate = date;
                }
              }

              // 补齐数据，使其每行有 maxColCount 列
              for (let date in packageData[packageId]) {
                let currentDataLength = packageData[packageId][date].length;
                if (currentDataLength == 0) {
                  for (let i = 0; i < currentLoop * step; i++) {
                    packageData[packageId][date].push([])
                  }
                } else {
                  for (let i = 0; i < step - currentDataLength % step; i++) {
                    packageData[packageId][date].push([])
                  }
                }
              }

              // 循环当前包,每循环一次，得到一个表
              resultObj[packageId] = [];
              for (let loop = 0; loop < currentLoop; loop++) {
                // 每次循环，先加入表头 因为一次循环意味着一张表
                let theadArr = []
                theadArr.push("测量时间")
                for (let i = loop * step; i < (loop + 1) * step; i++) {
                  if (packageData[packageId][maxColDate][i] && packageData[packageId][maxColDate][i].meta) {
                    theadArr.push(packageData[packageId][maxColDate][i].meta)
                  } else {
                    theadArr.push("-")
                  }
                }
                resultObj[packageId].push(theadArr)
                for (let date in packageData[packageId]) {
                  let dataArr = [];
                  dataArr.push(date);
                  for (let t = loop * step; t < (loop + 1) * step; t++) {
                    let same = false;
                    for (let i = loop * step; i < (loop + 1) * step; i++) {
                      if (packageData[packageId][date][i] && packageData[packageId][date][i].meta == packageData[
                          packageId][maxColDate][t].meta) {

                        dataArr.push(packageData[packageId][date][i].value)
                        same = true;
                        break;
                      }

                    }
                    if (!same) {
                      dataArr.push('-')
                    }
                  }

                  resultObj[packageId].push(dataArr)
                }

              }


            }
            for (let packageId in resultObj) {
              var hName = packageName[packageId];
              var eachTable =
                "<table style='border-collapse: collapse;width: 100%;color: #000000;' bordercolor='#000' border='2'  id='precis" +
                packageId + "'><thead><h4 style='color: #000;'>" + hName + "</h4></thead>";
              let rowArr = resultObj[packageId]
              for (let row = 0; row < rowArr.length; row++) {
                eachTable += "<tbody><tr>"
                let colArr = rowArr[row]
                for (let col = 0; col < colArr.length; col++) {
                  eachTable += "<td style='height: 40px;padding: 10px;font-size: 21px;'>" + (colArr[col] || '-') +
                    "</td>"
                }
                eachTable += "</tr></tbody>"
              }
              eachTable += "</table>"
              this.precisStr += eachTable
            }


          })
        }

      },
      init_monitorMap() {
        // 机能监控
        this.monitorStr = ''
        var packageIdArray = [];
        if (!this.detailData.monitorMap || Object.keys(this.detailData.monitorMap).length === 0) {
          // 空结果集 不处理，直接返回
          return;
        }

        //将所有的packageId用的编号拿出来
        for (var eachDate in this.detailData.monitorMap) {
          var thisData1 = this.detailData.monitorMap[eachDate].data;
          if (!thisData1) continue
          for (var g = 0; g < thisData1.length; g++) {
            var thisId = thisData1[g].packageId;
            if (packageIdArray.indexOf(thisId) == -1) {
              packageIdArray.push(thisId);
            }
          }
        }
        packageIdArray.sort(this.sortNumber);
        var packageName = {};
        if (packageIdArray.length > 0) {
          selectByPackageId({
            packageIds: packageIdArray.toString()
          }).then(result => {
            for (var i = 0; i < result.data.length; i++) {
              packageName[result.data[i].packageId] = result.data[i].shortName;
            }
          }).then(() => {

            // 照包名来分解数据
            var packageData = {};
            for (var pNum = 0; pNum < packageIdArray.length; pNum++) {
              // 这里是 每个包的数据
              var eachdd = {};
              for (var eachDate in this.detailData.monitorMap) {
                var eachDateData = this.detailData.monitorMap[eachDate];
                var eachData = eachDateData.data;
                var thisDate = this.dateStr(eachDate);
                var dataArray = eachdd[thisDate];
                if (dataArray == undefined) {
                  dataArray = [];
                }
                eachdd[thisDate] = dataArray;
                for (var p in eachData) {
                  var thisPackageId = eachData[p]["packageId"];
                  if (packageIdArray[pNum] == thisPackageId) {
                      dataArray.push(eachData[p]);
                  }
                }
              }
              packageData[packageIdArray[pNum]] = eachdd;

            }


            // 每一行最大列数定义为9，该数字是查阅了所有包里最大指标数 24，定义了9 减去首列时间信息列，就是8个指标数据列
            let maxColCount = 5;
            let step = maxColCount - 1;
            let resultObj = {};
            for (var packageId in packageData) {
              // 当前包循环次数
              let currentLoop = 1;
              let maxColDate = ""
              for (let date in packageData[packageId]) {
                if (packageData[packageId][date].length == 0) {
                  if (maxColDate == "") {
                    maxColDate = date;
                  }
                  continue;
                }
                let maxLoop = Math.ceil(packageData[packageId][date].length / step);
                if (maxLoop >= currentLoop) {
                  currentLoop = maxLoop;
                  maxColDate = date;
                }
              }

              // 补齐数据，使其每行有 maxColCount 列
              for (let date in packageData[packageId]) {
                let currentDataLength = packageData[packageId][date].length;
                if (currentDataLength == 0) {
                  for (let i = 0; i < currentLoop * step; i++) {
                    packageData[packageId][date].push([])
                  }
                } else {
                  for (let i = 0; i < step - currentDataLength % step; i++) {
                    packageData[packageId][date].push([])
                  }
                }
              }

              // 循环当前包,每循环一次，得到一个表
              resultObj[packageId] = [];
              for (let loop = 0; loop < currentLoop; loop++) {
                // 每次循环，先加入表头 因为一次循环意味着一张表
                let theadArr = []
                theadArr.push("测量时间")
                for (let i = loop * step; i < (loop + 1) * step; i++) {
                  if (packageData[packageId][maxColDate][i] && packageData[packageId][maxColDate][i].meta) {
                    theadArr.push(packageData[packageId][maxColDate][i].meta)
                  } else {
                    theadArr.push("-")
                  }
                }
                resultObj[packageId].push(theadArr)
                for (let date in packageData[packageId]) {
                  let dataArr = [];
                  dataArr.push(date);
                  for (let t = loop * step; t < (loop + 1) * step; t++) {
                    let same = false;
                    for (let i = loop * step; i < (loop + 1) * step; i++) {
                      if (packageData[packageId][date][i] && packageData[packageId][date][i].meta == packageData[
                          packageId][maxColDate][t].meta) {

                        dataArr.push(packageData[packageId][date][i].value)
                        same = true;
                        break;
                      }

                    }
                    if (!same) {
                      dataArr.push('-')
                    }
                  }

                  resultObj[packageId].push(dataArr)
                }

              }


            }
            for (let packageId in resultObj) {
              var hName = packageName[packageId];
              var eachTable =
                "<table style='border-collapse: collapse;width: 100%;color: #000000;' bordercolor='#000' border='2'  id='monitor" +
                packageId + "'><thead><h4 style='color: #000;'>" + hName + "</h4></thead>";
              let rowArr = resultObj[packageId]
              for (let row = 0; row < rowArr.length; row++) {
                eachTable += "<tbody><tr>"
                let colArr = rowArr[row]
                for (let col = 0; col < colArr.length; col++) {
                  eachTable += "<td style='height: 40px;padding: 10px;font-size: 21px;'>" + (colArr[col] || '-') +
                    "</td>"
                }
                eachTable += "</tr></tbody>"
              }
              eachTable += "</table>"
              this.monitorStr += eachTable
            }

          })
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  @page {
    size: auto;  /* auto is the initial value */
    margin: 0mm; /* this affects the margin in the printer settings */
  }
  h3 {
    background-color: #FFFFFF;
    padding: 0;
  }

  h4 {
    color: #000;
  }

  table {
    // width: 100%;
    // border-collapse: collapse;

    // // border-spacing: 10px;
    // border: 1px solid #000000;
    // color: #000;
  }

  table td {
    // border: 1px solid #000;
    // color: #000;
    height: 40px;
    padding: 10px;
    font-size: 21px;
  }
</style>
